import React, {Component, Fragment} from 'react';
import {Card, Progress} from 'antd';

import './ui.less';

class Progresses extends Component {
    render() {
        return (
            <Fragment>
                <Card title={'基础条形进度条'} className={'card-wrap'}>
                    分段进度条
                    <Progress percent={80} successPercent={60} />
                    <Progress percent={25} status={'normal'}/>
                    <Progress percent={50} status={'active'} strokeColor={'blue'}/>
                    <Progress percent={75} status={'success'}/>
                    <Progress percent={100} status={'exception'}/>
                </Card>
                <Card title={'基础圆形进度条'} className={'card-wrap'}>
                    <Progress type={'circle'} percent={25} status={'normal'}/>
                    <Progress type={'circle'} percent={50} status={'active'}/>
                    <Progress type={'circle'} percent={75} status={'success'}/>
                    <Progress type={'circle'} percent={100} status={'exception'}/>
                </Card>
                <Card title={'基础仪表盘进度条'} className={'card-wrap'}>
                    <Progress type={'dashboard'} percent={25} status={'normal'}/>
                    <Progress type={'dashboard'} percent={50} status={'active'}/>
                    <Progress type={'dashboard'} percent={75} status={'success'}/>
                    <Progress type={'dashboard'} percent={100} status={'exception'}/>
                </Card>
                <Card title={'圆形特殊进度条'} className={'card-wrap'}>
                    <Progress type={'circle'} percent={60} gapPosition={'top'}/>
                    <Progress type={'circle'} percent={60} gapPosition={'bottom'}/>
                    <Progress type={'circle'} percent={60} gapPosition={'left'}/>
                    <Progress type={'circle'} percent={60} gapPosition={'right'}/>
                    <Progress type={'circle'} percent={100} gapDegree={180}/>
                </Card>
            </Fragment>
        );
    }
}

export default Progresses;